<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>

<TITLE>SugarCRM SQL Editor</TITLE>
<META charset="utf-8"/>


<HEAD>


    <link href="../../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../../skins/plugins/animate.css" rel="stylesheet">

    <link rel="stylesheet" href="../../../skins/plugins/layui/css/layui.css">



    <link rel="stylesheet" href="../../../skins/plugins/FlowDesigner/css/node.css" />
    <link rel="stylesheet" href="../../../skins/plugins/FlowDesigner/plugings/jquery-ui-1.12.1.custom/jquery-ui.min.css" >
    <link rel="stylesheet" href="../../../skins/plugins/FlowDesigner/css/index.css" />
    <link rel="stylesheet" href="../../../skins/plugins/FlowDesigner/css/web.contextmenu.css" />

    <style>
        .CodeMirror {
            width: 100%;
            /*border: 1px solid black;*/
        }
        div::-webkit-scrollbar-track {
            background-color: #F5F5F5;
        }

        div::-webkit-scrollbar {
            width: 6px;
            background-color: #F5F5F5;
        }

        div::-webkit-scrollbar-thumb {
            background-color: #999;
        }
        .list_dt {
            background: #eeeeee;
            color: #272727;
            /* width: 188px; */
            padding: 0 40px 0 20px;
            height: 51px;
            line-height: 51px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            border-bottom: 1px solid #979797;
            width: auto;
        }
        .list_li {
            background: white;
            list-style-type: none;
            color: #272727;
            width: auto;
            padding: 0 30px;
            height: 52px;
            line-height: 60px;
            cursor: pointer;
            border-bottom: 1px solid #d3d3d3;
        }
        .nodeSpan{
            /*padding-left: 70px;*/
        }
    </style>

</HEAD>


<BODY>

<div class="layui-row layui-col-space5" style="min-height: 406px">
    <div class="layui-col-sm6 layui-col-md9">

        <div class="layui-card no-space" style="margin: 0px;">
            <div class="layui-card-header">
                新增任务
                <div class="layui-btn-group" style="float: right">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="save()"><i class="fa fa-save"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="save2Photo()"><i class="fa fa-picture-o"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="undo()"><i class="fa fa-undo"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="redo()"><i class="fa fa-repeat"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="clear()"><i class="fa fa-remove"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="showGrid()"><i class="fa fa-eye"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="setting()"><i class="fa fa-cog"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="helpDoc()"><i class="fa fa-question"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="shortcutKey()"><i class="fa fa-keyboard-o"></i></button>

                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_sql()"><i class="fa fa-play"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_sql()"><i class="fa fa-pause"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_sql()"><i class="fa fa-trash"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm plus" onclick="run_sql()"><i class="fa fa-plus-square"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm minus" onclick="run_sql()"><i class="fa fa-minus-square"></i></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="toggleSQL" onclick="toggleSQL()"><i class="fa fa-angle-double-up"></i></button>
                </div>
            </div>
            <div class="layui-card-body" style="padding: 0px;min-height: 500px">
                <!-- 流程图绘制区域 -->
                <div id="canvasId" class="canvasClass" >
                    <div id="Container" style="min-height: 500px;background-image:url(../../../skins/plugins/FlowDesigner/images/grid.jpeg)"></div>
                </div>

            </div>
        </div>


        <div class="layui-card" style="margin-top: 5px;">
            <div class="layui-card-body" style="padding: 0px;">
                <div class="layui-tab" style="height: 400px">
                    <ul class="layui-tab-title">
                        <li class="layui-this">运行结果</li>
                        <li>运行日志</li>
                        <li>运行历史</li>

                        <div class="layui-btn-group" style="float: right;padding: 5px;">
                            <button type="button" style="float: right;" class="layui-btn layui-btn-sm" data-type="isAll">导出</button>
                        </div>
                    </ul>
                    <div class="layui-tab-content" style="padding: 0px;">
                        <div class="layui-tab-item layui-show" id="data-container" style="text-align: center">暂无数据，请先运行任务!</div>
                        <div class="layui-tab-item" id="data-error" style="text-align: center">暂无数据，请先运行任务!</div>
                        <div class="layui-tab-item" style="text-align: center">暂无数据，请先运行任务!</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
        <div class="layui-card no-space" style="margin: 0px;">
            <div class="layui-card-header">数据资源</div>
            <div class="layui-card-body" style="padding: 0px 15px;">
                <form class="layui-form" action="">
                    <select name="modules" lay-verify="required" lay-search="">
                        <option value="">请选择数据源</option>
                        <option value="1" selected>10.106.1.190-原始库</option>
                        <option value="2">资源库</option>
                        <option value="3">主题库</option>
                    </select>
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入数据资源名称查询" class="layui-input" >
                </form>
                <dl class="list_dl" style="z-index: 1;  border: 1px #d3d3d3 solid;width: 100%;">

                    <dt class="list_dt">
                        <span class="_after"></span>
                        <p>数据资源</p>
                        <i class="list_dt_icon"></i>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="table" href="javascript: void(0);" >
                                    <span class="nodeSpan">常住人口</span>
                                </div>
                            </li>
                        </ul>
                    </dd>







                    <dt class="list_dt">
                        <span class="_after"></span>
                        <p>工具</p>
                        <i class="list_dt_icon"></i>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <li class="list_li">
                                <div id="unableDraggableDiv" align="center" style="padding: 3px;">
                                    <i id="mouseToolsBtn" class="fa fa-mouse-pointer fa-2x showItemTxt" aria-hidden="true" type="2"></i>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="nodeSpan">鼠标工具</span>
                                </div>
                            </li>
                            <li class="list_li">
                                <div id="enableDraggableDiv" align="center" style="padding: 3px;">
                                    <i id="connectionToolsBtn" class="fa fa-exchange fa-2x showItemTxt" aria-hidden="true" type="2"></i>
                                    &nbsp;&nbsp;
                                    <span class="nodeSpan">连线工具</span>
                                </div>
                            </li>
                        </ul>
                    </dd>



                    <dt class="list_dt">
                        <span class="_after"></span>
                        <p>节点</p>
                        <i class="list_dt_icon"></i>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="start" stepType="start" href="javascript: void(0);" class="startNode" style="margin-left: 30px; margin-top: 8px; position: static; float: left;">
                                </div>
                                <pre style="float: left;">    </pre>
                                <span class="nodeSpan">开始</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="end"  stepType="end"href="javascript: void(0);" class="endNode" style="margin-left: 30px; margin-top: 8px;">
                                </div>
                                <span class="nodeSpan">结束</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="gateWay"  stepType="gateWay" href="javascript: void(0);" class="gateWayNode" style="margin-top: 17px; margin-left: 47px; position: static; float: left;">
                                </div>
                                <pre style="float: left;"> </pre>
                                <span class="nodeSpan">网关</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="event"  stepType="event"href="javascript: void(0);" class="eventNode" style="margin-left: 30px; margin-top: 8px;">
                                </div>
                                <span class="nodeSpan">事件</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="comm"  stepType="comm"href="javascript: void(0);" class="commNode" style="width: 30px; height: 20px; margin-left: 30px; margin-top: 13px; position: static; float: left;">
                                </div>
                                <pre style="float: left;">    </pre>
                                <span class="nodeSpan">人工活动</span>
                            </li>
                        </ul>
                    </dd>






                    <dt class="list_dt">
                        <span class="_after"></span>
                        <p>子流程</p>
                        <i class="list_dt_icon"></i>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="innerChildFlow" href="javascript: void(0);" class="innerChildFlowNode" style="width:30px; height: 20px; margin-left: 30px; margin-top: 13px; position: static; float: left;">
                                </div>
                                <pre style="float: left;">    </pre>
                                <span class="nodeSpan">内部子流程</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="outerChildFlow" href="javascript: void(0);" class="outerChildFlowNode" style="width:30px; height: 20px; margin-left: 30px; margin-top: 13px;">
                                </div>
                                <span class="nodeSpan">外部子流程</span>
                            </li>
                        </ul>
                    </dd>
                    <dt class="list_dt">
                        <span class="_after"></span>
                        <p>泳道</p>
                        <i class="list_dt_icon"></i>
                    </dt>
                    <dd class="list_dd">
                        <ul>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="broadwiseLane" href="javascript: void(0);" class="broadwiseLaneNode" style="width:30px; height: 20px; margin-left: 30px; margin-top: 13px; position: static; float: left;">
                                </div>
                                <pre style="float: left;">    </pre>
                                <span class="nodeSpan">横向泳道</span>
                            </li>
                            <li class="list_li controler" style="cursor: move;">
                                <div id="directionLane" href="javascript: void(0);" class="directionLaneNode" style="width:30px; height: 20px; margin-left: 30px; margin-top: 13px;">
                                </div>
                                <span class="nodeSpan">纵向泳道</span>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>

    </div>
</div>


<script src="../../../skins/plugins/jquery.min.js?v=2.1.4"></script>
<script src="../../../skins/plugins/layui/layui.all.js"></script>


<!-- 注意Ready.js要放在最后面 -->
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/jsplumb.min.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/layui/layui.all.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/web.contextmenu.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/graphlib.min.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/html2canvas.min.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/js/canvg.js"></script>

<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/util/StringUtils.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/util/GraphlibUtils.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/util/LayuiUtils.js"></script>
<script type="text/javascript" src="../../../skins/plugins/FlowDesigner/util/JsPlumbUtils.js"></script>

<script type="text/javascript" src="../../../skins/develop/js/flow/GlobalVar.js"></script>
<script type="text/javascript" src="../../../skins/develop/js/flow/MyLayui.js"></script>

<script type="text/javascript" src="../../../skins/develop/js/flow/RightMenu.js"></script>


<script type="text/javascript" src="../../../skins/develop/js/flow/MyFunction.js"></script>
<script type="text/javascript" src="../../../skins/develop/js/flow/Ready.js"></script>


<!--<script src="../../../skins/develop/js/flow/schema.js"></script>

<script src="../../../skins/develop/js/flow/setp.js"></script>

<script src="../../../skins/develop/js/flow/designer.js"></script>-->
<script>

    /**
     * 手风琴菜单效果
     */
    $.each($('dd[class=list_dd]'), function() {
        $(this).prev().attr("id", "open");
        $(this).show();
    });
    $(".list_dt").on("click", function() {
        if($(this).attr("id") == "open") {
            $(this).removeAttr("id").next().hide();
        } else {
            $(this).attr("id", "open").next().show();
        }
    });
</script>



</BODY>
</HTML>
